<template>
  <div class="app-container">
       <div class="customer-info">
        <p class="customer-info-title">合同基本信息</p>
        <table class="my-table">
          <tr>
          <td class="text-r">合同名称</td>
          <td>{{contract.code}}</td>
          <td class="text-r">合同名称</td>
          <td>{{contract.name}}</td>
          </tr>
          <tr>
          <td class="text-r">客户名称</td>
          <td>{{customer.customerName}}</td>
          <td class="text-r">合同金额</td>
          <td>{{contract.money}}</td>
          </tr>
           <tr>
          <td class="text-r">下单时间</td>
          <td>{{contract.orderDate}}</td>
          <td class="text-r">
              审核人
          </td>
           <td > 
              {{auditUser.nickName}}
          </td>
          </tr>
          <tr>
          <td class="text-r">审核状态</td>
          <td > <el-tag prop="checkStatus" v-for="(item, index) in statusOptions"  :type="contract.checkStatus==1?'success':'danger'"  v-if="contract.checkStatus==item.dictValue">{{item.dictLabel}}</el-tag></td>
          <td class="text-r">
              合同状态
          </td>
          <td><el-tag prop="status" v-for="(item, index) in opStatusOptions"  :type="contract.status==1?'success':'danger'"  v-if="contract.status==item.dictValue">{{item.dictLabel}}</el-tag></td>
          </tr>
          <tr>
          <td class="text-r">合同开始时间</td>
          <td>{{contract.startTime}}</td>
          <td class="text-r">合同结束时间</td>
          <td ><span >{{contract.limitTime}}</span></td>
          </tr>
           <tr>
          <td class="text-r">审核时间</td>
          <td>{{contract.auditTime}}</td>
          <td class="text-r">客户签约人</td>
          <td ><span >{{contacts.name}}</span></td>
          </tr>
          <tr>
          <td class="text-r">回款金额</td>
          <td>{{contract.receivedMoney}}</td>
           <td class="text-r">未回款金额</td>
          <td >{{contract.unreceivedMoney}}</td>
          </tr>
           <tr>
          <td class="text-r">备注</td>
          <td colspan="3">{{contract.remark}}</td>
          
          </tr>
          
        </table>
        <p class="customer-info-title">相关信息</p>
        <el-tabs v-model="activeName" type="card"  >
          <el-tab-pane label="产品" name="product">
            <el-table
              :data="productList"
              border
              style="width: 100%">
              <el-table-column
                prop="productName"
                label="产品名称"
                width="180">
              </el-table-column>
               <!-- <el-table-column
                  prop="cateName"
                  label="类别"
                  width="120">
                </el-table-column> -->
                <el-table-column
                  prop="unit"
                  label="单位"
                  width="120">
                </el-table-column>
              <el-table-column
                prop="price"
                label="单价"
                width="180">
              </el-table-column>
              <el-table-column
                  prop="salesPrice"
                  label="售价"
                  width="150">
                </el-table-column>
              <el-table-column
                prop="num"
                label="数量">
              </el-table-column>
             <el-table-column
                  prop="discount"
                  label="折扣"
                  width="100">
                </el-table-column>
             <el-table-column
                  prop="subtotal"
                  label="小计"
                  width="120">
                </el-table-column>
            </el-table>
          </el-tab-pane>
         <el-tab-pane label="追加合同金额" name="moneys">
              <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                  <el-button
                    type="primary"
                    icon="el-icon-plus"
                    size="mini"
                    @click="handleAddMoney"
                    v-hasPermi="['crm:contractMoney:add']"
                  >追加金额</el-button>
                </el-col>
              </el-row>
            <el-table
              :data="moneys"
              border
              style="width: 100%">
              <el-table-column
                prop="money"
                label="追加金额"
                width="180">
              </el-table-column>
               <el-table-column
                  prop="createTime"
                  label="提交时间"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="addTime"
                  label="追加日期"
                  width="120">
                </el-table-column>
              <el-table-column
                prop="note"
                label="备注"
                width="180">
              </el-table-column>
            </el-table>
          </el-tab-pane>
         
        </el-tabs>
       </div>
        <el-dialog :title="addMoney.title" :visible.sync="addMoney.open" width="400px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
              <el-form-item label="追加金额" prop="money" >
                <el-input v-model="form.money" type="number" placeholder="请输入金额" />
              </el-form-item>
              <el-form-item label="追加日期" prop="addTime" >
                 <el-date-picker
                  v-model="form.addTime"
                  type="date"
                  placeholder="选择追加日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="备注" prop="note" >
                <el-input v-model="form.note"   placeholder="请输入备注" />
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitAddMoneyForm">确 定</el-button>
              
            </div>
        </el-dialog>
  </div>
</template>

<script>
 import { getContract  } from "@/api/crm/contract";
  import { addContractMoney  } from "@/api/crm/contractMoney";
export default {
  name: "contract",
  components: {  },
  data() {
    return {
      auditUser:{},
      contacts:{},
      opStatusOptions:[],
      form:{
        money:0,
        addTime:undefined,
        note:undefined
      },
      addMoney:{
        title:"追加合同金额",
        open:false
      },
      activeName: 'product',
      statusOptions:[],
      productList:[],
      moneys:[],

      // 查询参数
      queryParams: {
        
      },
      contract:{},
      customer:{},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
     this.getDicts("contract_status").then((response) => {
        this.statusOptions = response.data;
    });
    this.getDicts("contract_op_status").then((response) => {
      this.opStatusOptions = response.data;
    });
  },
  mounted() {
   
  },
  methods: {
    handleAddMoney(){
        this.addMoney.open=true;
        this.form.money=0;
        this.form.addTime=undefined;
        this.form.contractId= this.contract.contractId
    },
    submitAddMoneyForm(){
        this.$refs["form"].validate(valid => {
        if (valid) {
          addContractMoney(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("追加成功");
                this.addMoney.open = false;
                this.getContract(this.contract.contractId);
              }
            });
        }
      });

    },
    getContract(contractId){
      getContract(contractId,1).then(response => {
        this.contract = response.contract;
        this.productList=response.product;
        this.customer=response.customer;
        this.moneys=response.moneys;
        this.auditUser=response.auditUser;
        this.contacts=response.contacts;
      
      });
    }
    
  }
};
</script>
<style scoped>
.customer-info-title{
  font-weight: bold;
}

.customer-info{
  margin:10px;
  overflow:auto;
}
 .my-table{
    
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    border-spacing: 0;
    border-top: 1px solid #ebeef5;
    border-left: 1px solid #ebeef5;
}

.my-table td{
    width: 25%;
    word-break: break-all;
    word-wrap: break-word;
    border-right: 1px solid #ebeef5;
    border-bottom: 1px solid #ebeef5;
    font: 500 14px Arial;
    padding: 10px 10px;
}
.my-table .text-r{
    font-weight: bold;
    text-align: right;
}
</style>
<style>
 
</style>

